<template>
    <div class="cart">
        <div class="cart-container">
            <van-empty v-show="goodsList.length === 0" description="购物车目前还没有商品" :img="cartEmptyImage">
                <router-link :to="{name:'category'}">
                    <van-button round type="danger" class="bottom-button">去购物</van-button>
                </router-link>
            </van-empty>
            <!--购物车列表-->
            <div v-for="item in goodsList" :key="item.id" class="list">
                <van-swipe-cell>
                    <!--复选框-->
                    <div class="checkbox">
                        <van-checkbox :name="item" v-model="item.cart.checked" @change="onCheck" checked-color="#f11a27"></van-checkbox>
                    </div>
                    <!--商品图片-->
                    <div class="image">
                        <router-link :to="{name:'goodsDetail',params:{id:item.id}}">
                            <van-image width="50" height="50" :src="item.picture" />
                        </router-link>
                    </div>
                    <!--商品信息-->
                    <div class="goods-info">
                        <div>{{ item.name }}</div>
                        <div class="bottom">
                            <div class="price"><span>￥</span>{{ item.price }}</div>
                            <van-stepper v-model="item.cart.num" theme="round" button-size="22" disable-input />
                        </div>
                    </div>
                    <!--左滑删除-->
                    <template #right>
                        <van-button aquare icon="delete" type="danger" class="delete-button" @click="onDelete(item)"></van-button>
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        <!--结算-->
        <van-submit-bar v-show="goodsList.length" :price="total * 100" button-text="去结算" button-type="primary"
        @submit="onSubmit" class="settlement">
            <van-checkbox v-model="allChecked" checked-color="#f11a27" @click="onCheckAll">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script setup>
import { ref,onMounted,computed } from 'vue';
import { getCartList } from '../api';
import useCart from '../stores/cart';
import cartEmptyImage from '../assets/images/cart_empty.png'
import { showToast } from 'vant';

const { cart,removeCart} = useCart()

const goodsList = ref([])
const allChecked = ref(false)

onMounted(async()=>{
    await loadCart()
})

const loadCart = async() =>{
    const ids = cart.map(item => item.id)
    goodsList.value=await getCartList({ids:ids.join(',')})
    goodsList.value.forEach(goods=>{
        goods.cart=cart.find(item=>goods.id == item.id)
    })
}

//删除商品
const onDelete = item => {
    const id = item.id
    goodsList.value.forEach((item,index) => {
        if(item.id == id){
            goodsList.value.splice(index,1)
        }
    })
    removeCart(id)
}

//总金额
const total = computed(() => {
    let sum = 0
    goodsList.value.forEach(item=>{
        if(item.cart.checked){
            sum += item.price * item.cart.num
        }
    })
    return sum
})

//全选
const onCheckAll = () =>{
    goodsList.value.forEach(el => {
        el.cart.checked = allChecked.value
    })
}

//去结算
const onSubmit =()=>{
    showToast('待开发')
}

//商品全被选中，全选按钮高亮
const onCheck=()=>{
    allChecked.value=goodsList.value.every(el=>el.cart.checked)
}
</script>

<style lang="less" scoped>
.cart{
    margin:0.3rem;
    padding:.05rem 0 3rem 0;
    .cart-container{
        margin-top: 1rem;
        .list{
            position: relative;
            height: 5rem;
            border-radius: 10px;
            box-shadow: 0px 0px 5px #ccc;
            margin-bottom: 1rem;
            .checkbox{
                position:absolute;
                top: 1.7rem;
                left: .2rem;
            }
            .image{
                position: absolute;
                top:.7rem;
                left: 2rem;
            }
            .goods-info{
                height: 5rem;
                display: flex;
                justify-content: space-around;
                flex-direction: column;
                padding: 0 1rem 0 6rem;
                .bottom{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .price{
                        color: #c82519;
                        font-size: .45rem;
                    }
                }
            }
            .delete-button{
                width: 2rem;
                height: 100%;
            }
        }
        .bottom-button{
            width: 7rem;
            height: 2rem;
        }
    }
    .settlement{
        margin-bottom: -0.1rem;
    }
}
:deep(.van-submit-bar){
    bottom: 3.5rem;
}
:deep(.van-swipe-cell){
    width: 100%;
}
</style>